<template>
  <div class="notice-bar">
    <div :class="type">
      <!-- <span>
        <i :class="iconType"></i>
      </span>-->
      <!-- <div v-html="message"></div> -->
      <slot>
        <p></p>
        <p></p>
        <span></span>
      </slot>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "noticeBar",
  data() {
    return {};
  },
  props: {
    type: String,
    // message: String,
    // message1: String
  },
  methods: {},
  computed: {
    iconType: function () {
      let icon = "";
      const type = this.type;
      if (type === "info") {
        icon = "sl-tsfh";
      } else if (type === "success") {
        icon = "sl-czcg";
      } else if (type === "error") {
        icon = "sl-cwts";
      } else if (type === "warning") {
        icon = "sl-flbgz";
      }
      return icon;
    }
  }
};
</script>
<style lang='scss'>
@import "noticeBar";
</style>
